<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单展示页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <!-- 控制用户是否登录 -->
    <!--    <script src="js/loginStatus.js"></script>-->
    <style>

        .navbar-text a {
            color: #ffffff;
        }

        .login-text {
            margin-right: 50px;
        }

        .table tr:first-child {
            background-color: #e2e2e2;
            font-weight: 600;
        }

        .tab-content {
            padding-top: 24px;
        }

        .toPay {
            position: relative;
            left: 250px;
            margin-left: 30px;
        }

    </style>
</head>
<body>
<%--导航栏--%>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.jsp" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i>
                寻欢易购</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="cart.jsp">购物车</a></li>
            <li><a href="showOrder.jsp">我的订单</a></li>
            <li id="li_register"><a href="register.jsp">注册</a></li>
            <li id="li_login"><a href="login.jsp">登录</a></li>
            <li id="li_user_info" class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">
                    <span id="span_user_name">？？？</span>
                    <span class="caret"></span>
                </a>

                <ul class="dropdown-menu">
                    <li><a href="#">个人信息</a></li>
                    <li><a href="javascript:logoutSubmit()">注销</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <ul class="nav nav-tabs" id="orderTabs">
                <li class="active"><a id="0" href="#unpayOrders">未支付订单</a></li>
                <li><a id="1" href="#payedOrders">已支付订单</a></li>
                <li><a id="2" href="#expiredOrders">已取消订单</a></li>
            </ul>
            <div class="tab-content" id="app">
                <div id="unpayOrders" class="tab-pane active">
                    <table class="table" v-for="o in unpayOrders">
                        <tbody v-if="unpayOrders == 1">
                        <tr>
                            <td><h1>暂无数据</h1></td>
                        </tr>
                        </tbody>
                        <tbody v-else>
                        <tr>
                            <td  colspan="3">订单日期: {{o.createTime}}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{o.orderNo}}</td>
                        </tr>
                        <tr><td></td></tr>
                        <!--                                <tr v-for="g in goods">-->
                        <tr v-for="v in o.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="v.goodsImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{v.goodsTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{v.goodPrice}}</td>
                            <td>{{v.goodNum}}</td>
                        </tr>
                        </tbody>
                        <br>
                        <tbody v-if="unpayOrders != 1">
                        <tr>
                            <td style="background: #FFFFFF">
                                <span class="t"><font color='red'>剩余支付时间:--时--分--秒</font></span>
                                <button onclick="cancelOrder(this)" :id="o.orderNo" class="btn btn-danger btn-lg toPay">
                                    取消订单
                                </button>
                                <button onclick="toPayOrder(this)" :id="o.orderNo" class="btn btn-success btn-lg toPay">
                                    去支付
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>


                </div>

                <div id="payedOrders" class="tab-pane">
                    <table class="table" v-for="o in payedOrders">
                        <tbody v-if="payedOrders == 1">
                        <tr>
                            <td><h1>暂无数据</h1></td>
                        </tr>
                        </tbody>
                        <tbody v-else>
                        <tr>
                            <td colspan="3">订单日期: {{o.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{o.orderNo}}</td>
                        </tr>


                        <!--                                <tr v-for="g in goods">-->
                        <tr v-for="v in o.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="v.goodsImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{v.goodsTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{v.goodPrice}}</td>
                            <td>{{v.goodNum}}</td>
                        </tr>

                        </tbody>
                        <tbody v-if="payedOrders != 1">
                        <tr>
                            <td style="background: #FFFFFF">
                                <button style="left: 570px" onclick="deleteOrder(this)" :id="o.orderNo"
                                        class="btn btn-danger btn-lg toPay">删除订单
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="expiredOrders" class="tab-pane">
                    <table class="table" v-for="o in expiredOrders">
                        <tbody v-if="expiredOrders == 1">
                        <tr>
                            <td><h1>暂无数据</h1></td>
                        </tr>
                        </tbody>
                        <tbody v-else>
                        <tr>
                            <td colspan="3">订单日期: {{o.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{o.orderNo}}</td>
                        </tr>
                        <!--                                <tr v-for="g in goods">-->
                        <tr v-for="v in o.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="v.goodsImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{v.goodsTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{v.goodPrice}}</td>
                            <td>{{v.goodNum}}</td>
                        </tr>
                        </tbody>
                        <tbody v-if="expiredOrders != 1">
                        <tr>
                            <td style="background: #FFFFFF">
                                <button style="left: 570px" onclick="deleteOrder(this)" :id="o.orderNo"
                                        class="btn btn-danger btn-lg toPay">删除订单
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

</body>
<script>
    var arr = null

    var order = new Vue({
        el: '#app',
        data: {
            unpayOrders: [],
            payedOrders: [],
            expiredOrders: []
        }
    })

    function getOrderInfo() {
        order.unpayOrders = [];
        order.payedOrders = [];
        order.expiredOrders = [];
        let id = $('.active a').attr('id');
        // console.log(id)
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/order',
            dataType: 'json',
            // async:false,
            data: {
                status: id, method: 'getOrderOfStatus'
            },
            type: 'GET',
            success: function (_data) {
                // console.log(_data[0].createTime)
                //返回的数据为空时，统一赋值为1
                if (_data.length == 0) {
                    order.unpayOrders = 1;
                    order.payedOrders = 1;
                    order.expiredOrders = 1;
                }

                //根据a标签的id给对应的Vue数据赋值
                for (let i = 0; i < _data.length; i++) {
                    if (id == 0) {
                        order.unpayOrders.push(_data[i]);
                        arr = _data;
                        fun(arr);
                    } else if (id == 1) {
                        order.payedOrders.push(_data[i]);
                    } else if (id == 2) {
                        order.expiredOrders.push(_data[i]);
                    }

                }
            }
            // console.log(order.orders[0].orders[0].goodsImg)
        });

    }

    getOrderInfo();

    // var trList = document.getElementsByClassName('t');

    function fun(a){
        for (let i = 0; i < a.length; i++) {
            fun1(i,a[i].createTime);
        }
    }

    function fun1(no,timer){

        let tt = setInterval(function () {
            if (document.getElementsByClassName('t')[no] == null) {
                clearInterval(tt);
                return;
            }
            //当前时间
            //活动时间6
            let date = new Date();
            let miao = date.getTime(); //获取时间戳
            let liveDate = new Date(timer).getTime(); //13位数的时间戳 毫秒

            let time = (121 * 1000) - (miao - liveDate);

            if (time <= 1) {
                getOrderInfo();
                clearInterval(tt);
                return;
            }

            let hours = parseInt((time / 1000) / 60 / 60);
            let minutes = parseInt((time / 1000) / 60 % 60);
            let second = parseInt((time / 1000) % 60);
            hours = hours <= 9 ? '0' + hours : hours;
            minutes = minutes <= 9 ? '0' + minutes : minutes;
            second = second <= 9 ? '0' + second : second;
            document.getElementsByClassName('t')[no].innerHTML = "<font color='red'>剩余支付时间:" + hours + "时" + minutes + "分" + second + "秒";

        }, 1000);

        return tt;
    }

    $('li').click(function () {
        getOrderInfo()
    });

    function cancelOrder(btnTag) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/order',
            data: {
                orderNo: btnTag.id, method: 'cancelOrder'
            },
            dataType: 'json',
            success: function (_data) {
                location.reload();
            }
        })
    }

    function deleteOrder(btnTag) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/order',
            data: {
                orderNo: btnTag.id, method: 'deleteOrder'
            },
            dataType: 'json',
            success: function (_data) {
                getOrderInfo();
            }
        })
    }

    //显示用户登陆信息
    function initUserInfo() {
        if (!$.cookie('frontedUsername') || $.cookie('frontedUsername') == "null") {
            //用户未登录，显示登录和注册按钮
            $("#li_login").show();
            $("#li_register").show();
            $("#li_user_info").hide();
        } else {
            //用户已登录，显示用户名
            $("#li_login").hide();
            $("#li_register").hide();
            $("#li_user_info").show();
            $("#span_user_name").html($.cookie('frontedUsername'));
        }
    }

    initUserInfo();

    //注销点击事件
    function logoutSubmit() {
        //去后台删除cookie和session
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/logout',
            type: 'get',
            dataType: 'json',
            success: function (_data) {
                $.removeCookie('frontedUsername')
                localStorage.removeItem('local_shopping_cart')
                location.href = "index.jsp"
            }
        })
    }

    function toPayOrder(btnTag) {
        localStorage.setItem('local_shopping_orderNo', btnTag.id);
        location.href = '${pageContext.servletContext.contextPath}/pay.jsp';
    }

    $('#orderTabs a').click(function () {
        if ($(this).parent('.active').length == 0) { //如果找到的话，就表示当前标签处于未激活状态
            var status = $(this).prop('id');  //取到当前的tab的id, 与订单的状态是一致的
            $(this).tab('show');
        }
    })

</script>
</html>